const path = require("path");
const webpack = require("webpack");
const CompressionWebpackPlugin = require("compression-webpack-plugin");

function resolve(dir) {
  return path.join(__dirname, dir); //path.join(__dirname)设置绝对路径
}
module.exports = {
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      config.devtool = false;
      // 为生产环境修改配置...
      config.mode = 'production';
      config.plugins.push(
        new webpack.optimize.LimitChunkCountPlugin({
          maxChunks: 30,
          minChunkSize: 100
        })
      )
    } else {
      config.devtool = 'source-map'
    }
  },
  parallel: false,
  productionSourceMap: false,//不产生map文件
  // 选项...
  chainWebpack: (config) => {
    // config.plugin('chunkPlugin').use(webpack.optimize.LimitChunkCountPlugin, [{
    //   maxChunks: 20, // 必须大于或等于 1，此处设置文件数量
    //   minChunkSize: 10000 // webpack官网意思是合并小于设置数量大小文件，如果产生的文件大小小于设置值，那么直接和其他的文件合并，目前该配置没有产生效果
    // }]);
    config.plugin("provide").use(webpack.ProvidePlugin, [
      {
        $: "jquery",
        jquery: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
        //devtool:'none', //关掉打包webpack下的源文件映射
      },
    ]);
    if (process.env.NODE_ENV === 'production') {
      config.plugin('CompressionPlugin').use(
        new CompressionWebpackPlugin({
          test: /\.(js|css)$/,
          threshold: 10240, // 超过10kb的文件就压缩
          deleteOriginalAssets: false, // 不删除源文件
          minRatio: 0.8
        })
      )
    }
  },
  publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
  devServer: {
    open: true, // 运行项目时，是否自动开启新窗口。
    host: "0.0.0.0", // 默认端口号。
    port: 8080,
    hot: true,
    disableHostCheck: false,
    https: false, // 如果开启就会以https开头。
    hotOnly: false, //安装模块更好的兼容，不需要配置。
    proxy: {
      "/api": {
        target: "代理地址", //测试环境
        pathRewrite: {
          "^/api": "/",
        },
      },
    },
  },
  pages: {
    index: {
      // 页面入口
      entry: "src/main.js",
      // 模板来源
      template: "public/index.html",
      // 在 dist/index.html 的输出
      filename: "index.html",
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: "设备管理系统",
      // 在这个页面中包含的块，默认情况下会包含提取出来的通用 chunk 和 vendor chunk
      chunks: ["chunk-vendors", "chunk-common", "index"],
    },
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话，就回退到 `public/index.html`
    // 输出文件名会被推导为 `subpage.html`
    subpage: "src/main.js",
  },
  //定制主题
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          hack: `true; @import "${path.join(
            __dirname,
            "./src/assets/style/base.less"
          )}";`,
        },
      },
    },
  },
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [path.resolve(__dirname, "./src/assets/style/base.less")],
    },
  },
};
